<form action="" class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">场景图片</label>
    <div class="col-sm-10">
      <div class="house">
        <div class="house-item top" data-position="0"></div>
        <div class="house-item middle middle_1" data-position="1"></div>
        <div class="house-item middle middle_2" data-position="2"></div>
        <div class="house-item middle middle_3" data-position="3"></div>
        <div class="house-item middle middle_4" data-position="4"></div>
        <div class="house-item bottom" data-position="5"></div>
        <div class="upload-bg" id="upload-bg">
          <div class="upload-content"><a href="javascript:void(0)" id="upload-image" class="btn btn-default">上传图片</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-8">
      <input type="hidden" name="category" id="category" value="{$_GET['cat_id']}"/>
      <div class="margin-top"><a class="btn btn-primary" id="house-post">提交更改</a></div>
    </div>
  </div>
</form>

<style>
  .images{width:150px; height:100px; max-height:100px; overflow:hidden; }
  .images > img{width:100%;}
  .house {position:relative; width:800px; height:600px;}
  .house .house-item, .house .upload-bg{ width:200px; height:200px; overflow:hidden;}
  .house .house-item img{width:200px;}
  .house .top{background:#0099cc; position:relative; left:0;}
  .house .middle{ float:left; display:inline-block;}
  .house .middle_1{ background:#2F83EC;}
  .house .middle_2{ background:#743737;}
  .house .middle_3{ background:#B84D88;}
  .house .middle_4{ background:#5BB793;}
  .house .bottom{ clear:both; background:#B72049; position:relative; left:0;}
  .upload-bg{position:absolute; left:0; top:0; text-align:center; line-height:200px; -webkit-transition:all .3s ease-in-out; background:rgba(0,0,0,0.2); }
  .upload-bg .upload-content{width:120px; height:30px; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;}
  .upload-bg a{}
  #upload-image-button {position: absolute; left: -4px;}
  #SWFUpload_0{left:0; top:0;}
</style>

<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">

$(function() {
  
  //初始化显示图片
  
  var houseJson = {$images};
  if( houseJson.length ){
    $(".house-item").each(function(index){
      houseJson[index] && ( $(this).html("<img src='" + houseJson[index] + "'/>") );
    });
  }
  
  //pinObj防止上传时元素改变，houseData图片数据。
  var obj = {},
    pinObj = {},
    houseData = houseJson || new Array(6),
    id = {$_GET['id']};
  
  //上传层跟随，选择元素
  $(".house-item").bind("mouseenter", mouseEnter);
  function mouseEnter(){
    $("#upload-bg").css({ left: $(this).position().left, top:  $(this).position().top});
    obj.elem = this;
    obj.position = $(this).attr("data-position");
  }
  
  $("#upload-image").uploadify({
        'multi'      :  false,
        'buttonClass'  :  'margin-bottom',
        'fileSizeLimit' :   '500kb',
        'buttonText'  :  '上传图片',
        'fileTypeDesc'   :   'Image Files',
        'fileTypeExts'   :   '*.jpg; *.png',
        'swf'      :   '__PUBLIC__/Style/Common/uploadify/uploadify.swf',
        'uploader'    :   '__MODULE__/Upload/uploadOne',
        'onDialogOpen'    :  function(){ 
          pinObj.elem = obj.elem;
          pinObj.position = obj.position;
        },
        'onUploadSuccess'  : function(data, res){
          
          var  url = eval("(" + res + ")").extra.url;
          houseData[pinObj.position] = url;    
          $( pinObj.elem ).html( "<img src='"+url+"'/>" );
        }
    });
  
  //提交
  $("#house-post").click(function(){
    $.post("__CONTROLLER__/save", {pic:houseData.join("|"), id: id}, function(data){
      if( data.error == "0" ) {
        $().alertMsg({type: "success", msg: data.msg});
      } else {
        $().alertMsg({type: "danger", msg: data.msg});
      }
    });
  });
});
</script>
